<template>
    <view class="content">
        <!-- 头部 -->
        <u-navbar :fixed="true" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
            leftIconSize="0" :autoBack="false" :title="navbar.title">
            <view class="u-flex" slot="right">
                <u-icon name="search" size="26" @tap="test" :color="navbar.bgColor=='transparent'?'#fff':'#151C24'"></u-icon>
                <u-icon class="u-m-l-20" name="scan" size="26" @tap="test" :color="navbar.bgColor=='transparent'?'#fff':'#151C24'"></u-icon>
            </view>
        </u-navbar>
        
        <!-- swiper -->
        <u-swiper :list="swipers" interval="6000" height="432rpx" radius="0" 
            keyName="attachUrl" :showTitle="false" circular indicator
            @change="e => current = e.current">
            <!-- 自定义指示器 -->
            <view slot="indicator" class="indicator">
                <view class="indicator__dot"
                    v-for="(item, index) in swipers"
                    :key="index"
                    :class="[index === current && 'indicator__dot--active']" >
                </view>
            </view>
        </u-swiper>

        <!-- content -->
        <view class="uni-area box u-p-t-50 u-p-b-30">
            <!-- 横向滚动列表 -->
            <u-scroll-list class="scroll-list u-p-b-0">
                <view class="tem" v-for="(tem, ind) in scrolls" :key="ind">
                    <view v-for="(item,index) in tem" :key="index" @tap.stop="menuSkip(item.url)"
                        class="u-flex u-flex-col u-row-center item" style="min-height:138rpx">
                        <u--image width="108rpx" height="108rpx" shape="circle" :showLoading="true" :src="item.thumb"></u--image>
                        <text class="u-font-26 u-text-center" style="min-width:130rpx">{{item.title}}</text>
                    </view>
                </view>
            </u-scroll-list>

            <!-- 单位（原:企业）概况 -->
            <view class="u-m-t-50">
                <view class="u-font-36 font-bold">单位概况</view>
                <view class="u-m-t-30 uni-shadow u-p-t-0" 
                    @tap.stop="menuSkip('/pages/home-bag/ent-detail?id='+entOverview.qybh)">
                    <view class="u-flex u-row-right" style="margin-right:-30rpx">
                        <u--image src="/static/home/bg1.png" width="508rpx" height="42rpx"></u--image>
                    </view>
                    <view class="u-m-t-42 u-flex">
                        <u--image class="u-m-r-20" src="/static/home/bg1-icon.png" width="48rpx" height="48rpx"></u--image>
                        <text class="u-font-32 font-bold">{{entOverview.name}}</text>
                    </view>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col v-for="(item,index) in entOverview.list" :key="index" 
                            :span="item.span"
                            :class="['u-m-t-30','u-col-top','u-font-26']" style="flex-direction:row">
                            <text class="u-m-r-20 uni-dec-color">{{item.title}}</text>
                            <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="13" />
                            <text v-else class="uni-main-color u-line-1">{{item.value}}</text>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <!-- 项目概况 -->
            <view class="u-m-t-50">
                <view class="u-font-36 font-bold">项目概况</view>
                <view class="u-m-t-30 uni-shadow u-p-t-0" 
                    @tap.stop="menuSkip('/pages/home-bag/pro-detail?id='+projectOverview.gcbh)">
                    <view class="u-flex u-row-right" style="margin-right:-30rpx">
                        <u--image src="/static/home/bg2.png" width="508rpx" height="42rpx"></u--image>
                    </view>
                    <view class="u-m-t-42 u-flex">
                        <u--image class="u-m-r-20" src="/static/home/bg2-icon.png" width="48rpx" height="48rpx"></u--image>
                        <text class="u-font-32 font-bold">{{projectOverview.name}}</text>
                    </view>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col :span="item.span" v-for="(item,index) in projectOverview.list" :key="index" 
                            :class="['u-m-t-30','u-col-top','u-font-26']" style="flex-direction:row">
                            <text class="u-m-r-10 uni-dec-color">{{item.title}}</text>
                            <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="13" />
                            <text v-else class="uni-main-color u-line-1" :style="{maxWidth:item.span==12?'80%':'58%'}" @longtap="longTap(item.value)">
                                {{item.value}}
                            </text>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <!-- 专户监管情况 -->
            <view class="u-m-t-50">
                <view class="u-font-36 font-bold">专户监管情况</view>
                <view class="u-m-t-30 uni-shadow u-p-t-0" @tap.stop="accountDetail">
                    <view class="u-flex u-row-right" style="margin-right:-30rpx">
                        <u--image src="/static/home/bg3.png" width="508rpx" height="42rpx"></u--image>
                    </view>
                    <u-row class="u-m-t-12 u-flex u-flex-wrap">
                        <u-col span="6" v-for="(item,index) in zhuanhuList.list" :key="index" 
                            :class="['u-m-t-30','u-col-top','u-font-26']" style="flex-direction:row">
                            <text class="u-m-r-10 uni-dec-color">{{item.title}}</text>
                            <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="13" />
                            <text v-else class="uni-main-color">
                                {{item.value}}{{(item.value||item.value==0)&&item.value!='暂无字段'?item.unit:''}}
                            </text>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <!-- 数据看板 -->
            <view class="u-m-t-50">
                <view class="u-font-36 font-bold">数据看板</view>
                <view class="u-m-t-30 uni-shadow">
                    <view class="u-flex">
                        <view class="uni-line"></view>
                        <text class="u-m-l-20 uni-higt-color font-bold">工人情况</text>
                    </view>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col span="6" v-for="(item,index) in datas1" :key="index"
                            :class="['u-col-top',index==0||index==1?'u-m-t-30':'u-m-t-40']" style="flex-direction:row">
                            <u--image class="u-m-r-30" :src="item.icon" width="62rpx" height="62rpx"></u--image>
                            <view class="u-flex u-flex-col u-col-top">
                                <text class="u-font-48 font-bold">{{item.value}}</text>
                                <text class="u-m-t-10 u-font-24 uni-dec-color">{{item.title}}</text>
                            </view>
                        </u-col>
                    </u-row>
                </view>
                <view class="u-m-t-30 uni-shadow">
                    <view class="u-flex">
                        <view class="uni-line"></view>
                        <text class="u-m-l-20 uni-higt-color font-bold">今日考勤</text>
                    </view>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col span="6" v-for="(item,index) in datas2" :key="index" 
                            :class="['u-col-top',index==0||index==1?'u-m-t-30':'u-m-t-40']" style="flex-direction:row">
                            <u--image class="u-m-r-30" :src="item.icon" width="62rpx" height="62rpx"></u--image>
                            <view class="u-flex u-flex-col u-col-top">
                                <text class="u-font-48 font-bold">{{item.value}}</text>
                                <text class="u-m-t-10 u-font-24 uni-dec-color">{{item.title}}</text>
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>

            <!-- 班组情况 -->
            <view class="u-m-t-30 uni-shadow">
                <view class="u-flex">
                    <view class="uni-line"></view>
                    <text class="u-m-l-20 uni-higt-color font-bold">班组情况</text>
                </view>
                <view class="u-m-t-30 table">
                    <u-row class="teamTr">
                        <u-col span="2" align="center" class="teamTh">序号</u-col>
                        <u-col span="2" align="center" class="teamTh">班组数</u-col>
                        <u-col span="3" align="center" class="teamTh">班组人数</u-col>
                        <u-col span="5" align="center" class="teamTh">所属企业</u-col>
                    </u-row>
                    <u-row class="teamTr" v-for="(item,index) in teams.list" :key="index">
                        <u-col span="2" align="center" class="teamTd">{{index+1}}</u-col>
                        <u-col span="2" align="center" class="teamTd">{{item.groups}}</u-col>
                        <u-col span="3" align="center" class="teamTd">{{item.member}}</u-col>
                        <u-col span="5" align="center" class="teamTd"><text class="u-font-26">{{item.deptName}}</text></u-col>
                    </u-row>
                    <u-row class="teamTr">
                        <u-col span="2" align="center" class="teamTh">总计</u-col>
                        <u-col span="2" align="center" class="teamTh">{{teams.groups}}</u-col>
                        <u-col span="3" align="center" class="teamTh">{{teams.members}}</u-col>
                        <u-col span="5" align="center" class="teamTh">{{teams.list.length}}</u-col>
                    </u-row>
                </view>
            </view>

            <!-- 工人分布 -->
            <view class="u-m-t-30 uni-shadow uni-echarts-box">
                <qiun-title-bar title="工人分布" />
                <text class="unit">单位:人</text>
                <view class='u-m-l-20' style="height:480rpx">
                    <qiun-data-charts type="column" :opts="workerFenbu.opts" :chartData="workerFenbu" />
                </view>
            </view>
        </view>

        <!-- tabbar 盒子阴影 -->
        <view class="tabbar-shadow"></view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            systemInfo: uni.getStorageSync('systemInfo'),
            scrollHeight: 146,
            // 用户信息
            userInfo: uni.getStorageSync("userInfo"),
            // navbar
            navbar:{
                bgColor: 'transparent',
                shadow: false,
                title: '',
            },
            // swiper
            swipers:[
                {
                    attachUrl: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    title: '身无彩凤双飞翼，心有灵犀一点通'
                },
                {
                    attachUrl: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                }
            ],
            current: 0,
            // 横向滚动列表
            scrolls:[
                [
                    {
                        thumb: "/static/home/icon1.png",
                        title: '专户',
                        url: '/pages/fohf-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon2.png",
                        title: '工资',
                        url: '/pages/wage-bag/detail'
                    }
                ],
                [
                    {
                        thumb: "/static/home/icon3.png",
                        title: '班组',
                        url: '/pages/team-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon5.png",
                        title: '实名制',
                        url: '/pages/certification-bag/manage'
                    }, 
                ],
                [
                    {
                        thumb: "/static/home/icon7.png",
                        title: '考勤',
                        url: '/pages/kaoqin-bag/manage'
                    }, 
                    {
                        thumb: "/static/home/icon8.png",
                        title: '统计分析',
                        url:'/pages/other-bag/total-analyse'
                    }, 
                ],
                [
                    {
                        thumb: "/static/home/icon12.png",
                        title: '实名制审批',
                        url: '/pages/examine-bag/examine-list?type=autonym'
                    }, 
                    {
                        thumb: "/static/home/icon11.png",
                        title: '补卡审批',
                        url: '/pages/examine-bag/examine-list?type=buka'
                    }, 
                ],
                [   
                    {
                        thumb: "/static/home/icon10.png",
                        title: '信用',
                        url: '/pages/other-bag/credit'
                    }, 
                ],
                // [
                    // {
                    //     thumb: "/static/home/icon4.png",
                    //     title: '预警',
                    //     url: '/pages/other-bag/warn',
                    // },
                    // {
                    //     thumb: "/static/home/icon6.png",
                    //     title: '督办',
                    //     url: '/pages/other-bag/supervise',
                    // }
                // ],
                // [
                    // {
                    //     thumb: "/static/home/icon9.png",
                    //     title: '培训',
                    //     url: '/pages/other-bag/train'
                    // }, 
                    // {
                    //     thumb: "/static/home/icon2.png",
                    //     title: '工资',
                    //     url: '/pages/fohf-bag/manage'
                    // }
                // ],     
            ],
            // 企业概况/项目概况/工人情况/今日考勤 参数
            parameter:{
                deptId: null, // 所属部门编号
                gcbh: null // 所属项目(工程)编号
            },
            // 企业概况
            entOverview:{
                qybh: "",// 企业编号
                name: '安薪乐',  // qymc
                list:[
                    // { field:'qyfzr', title:'法人',  span: 6, value:'安薪乐' },
                    // { field:'qyfzrlxdh', title:'联系电话', span: 6,  value:'安薪乐', type:'phone' },
                    { field:'qyssqh', title:'注册地所属区划', span:12, value:'安薪乐' },
                    { field:'tyshxydm', title:'统一信用代码', span:12, value:'安薪乐' },
                ]
            },
            // 项目概况
            projectOverview:{
                gcbh: "",	//项目编号
                name: '安薪乐', // gcmc
                list: [
                    { field:'gcssqh', title:'注册地所属区划', span: 6, value:'安薪乐' },
                    { field:'xmfl_label', title:'项目类型', span: 6, value:'安薪乐' },
                    { field:'qyfzr', title:'项目经理', span: 12, value:'安薪乐' },
                    { field:'qyfzrlxdh', title:'项目经理联系电话', span: 12, value:'安薪乐', type:'phone' },
                    { field:'xmdz', title:'项目地址', span: 12, value:'安薪乐' },
                    { field:'buildingname', title:'建设单位', span: 12, value:'安薪乐' },
                    { field:'constructionname', title:'施工单位', span: 12, value:'安薪乐' },
                    { field:'jhkgsj', title:'合同开工时间', span: 6, value:'1970-01-01' },
                    { field:'jhjgsj', title:'合同竣工时间', span: 6, value:'1970-01-01' },
                    { field:'jsjd_label', title:'工程进度', span: 6, value:'安薪乐' },
                ]
            },
            // 专户监管情况
            zhuanhuList:{
                id: "",
                list:[
                    { field:'paytime', title:'每月工资拨付日', value:'1', unit:'号' },// paytime 文档有字段,但接口并未返回字段
                    { field:'payday', title:'每月工资发放日', value:'1', unit:'号' }, // payday
                    { field:'mdisburse', title:'本月拨付金额', value:'0', unit:'万元' },
                    { field:'msalary', title:'本月发放金额', value:'0', unit:'万元' },
                    { field:'disburse', title:'累计拨付金额', value:'0', unit:'万元' },
                    { field:'cumsalary', title:'累计发放金额', value:'0', unit:'万元' },
                    { field:'balance', title:'工资专户余额', value:'0', unit:'万元' },
                    { field:'accsBail', title:'保证金专户情况', value:'0' },
                ]
            },
            // 工人情况
            datas1:[
                { field:'smzrs', title:'实名制人数', icon:'/static/home/data1.png', value:'0' }, // staffs
                { field:'wstaffs', title:'待进场工人数', icon:'/static/home/data2.png', value:'0' },
                { field:'istaffs', title:'进场人数', icon:'/static/home/data3.png', value:'0' },
                { field:'ostaffs', title:'离场人数', icon:'/static/home/data4.png', value:'0' },
            ],
            // 今日考勤
            datas2:[
                { field:'staffs', title:'考勤人数', icon:'/static/home/data5.png', value:'0' },
                { field:'unatdStaffs', title:'缺勤人数', icon:'/static/home/data6.png', value:'0' },
                { field:'atdRate', title:'考勤率', icon:'/static/home/data7.png', value:'0' },
            ],
            // 班组情况
            teams:{
                groups: 0,
                members: 0,
                list:[
                    { serial:'', groups: 2, member: 8, deptName:'安薪乐' },
                ]
            },
            // 工人分布
            workerFenbu:{
                categories:[],
                series:[],
                opts:{ 
                    extra: {
                        column:{ width:20 }
                    },
                }
            },
        }
    },


    onReady(){
        this.scrollHeight = uni.upx2px(372)-this.systemInfo.statusBarHeight-44
    },

    // 页面滚动
    onPageScroll(e){
        if( e.scrollTop > this.scrollHeight ){
            this.navbar.bgColor = '#fff'
            this.navbar.shadow = true
            this.navbar.title = '安薪乐'
        }else{
            this.navbar.bgColor = 'transparent'
            this.navbar.shadow = false
            this.navbar.title = ''
        }
    },
    
    onLoad() {
        this.parameter.deptId = this.userInfo.deptId,
        this.parameter.gcbh = this.userInfo.ssgcbh
        // 焦点图
        this.getBanner()
        // 企业概况
        this.getHomeEntOverview()
        // 项目概况
        this.getHomeProjectOverview()
        // 专户监管情况
        this.getHomeAccSup()
        // 工人情况
        this.getHomeSsu()
        // 今日考勤
        this.getHomeToday()
        // 班组情况
        this.getHomeGroupOverview()
        // 工人分布
        this.getHomeAtdmonth()
    },

    methods: {
        test(){
            uni.$u.toast('开发中')
        },
        // 跳转
        menuSkip(url){
            uni.navigateTo({ url: url })
        },
        // 长按事件
        longTap(value){
            this.$tools.uToast(this,'default','',value,3000)
        },


        // 获取焦点图
        getBanner(){
            uni.showLoading({ title:'焦点图获取中' })
            const parameter = {
                ywlx: 'focus_map',
                bid: 'focus_map_20210000001',
                attachType:	'focus_map'
            }
            this.$request(this,this.$apis.CommonAccessory, parameter).then(res=>{
                // console.log('焦点图',res)
                this.swipers = res.rows
            }).then()
        },

        // 企业概况
        getHomeEntOverview(){
            uni.showLoading({ title:'企业概况加载中' })
            this.$request(this,this.$apis.HomeEntOverview, this.parameter).then(res=>{
                const { jbxxMap } = res
                // console.log('企业概况',jbxxMap)
                this.entOverview.qybh = jbxxMap.qybh
                this.entOverview.name = jbxxMap.qymc
                this.entOverview.list.map((v,i)=>{
                    v.value = jbxxMap[v.field]?jbxxMap[v.field]:'暂无数据源'
                })
            }).then()
        },

        // 项目概况
        getHomeProjectOverview(){
            uni.showLoading({ title:'项目概况加载中' })
            this.$request(this,this.$apis.HomeProjectOverview, this.parameter).then(res=>{
                const { jbxxMap } = res
                // console.log('项目概况',jbxxMap)  
                this.projectOverview.gcbh = jbxxMap.gcbh
                this.projectOverview.name = jbxxMap.gcmc
                this.projectOverview.list.map((v,i)=>{
                    v.value = jbxxMap[v.field]?jbxxMap[v.field]:'暂无数据源'
                })
            }).then()
        },

        // 专户监管情况
        getHomeAccSup(){
            uni.showLoading({ title:'专户监管情况' })
            this.$request(this,this.$apis.HomeAccSup, { gcbh: this.userInfo.ssgcbh }).then(res=>{
                // console.log('专户监管情况',res)
                this.zhuanhuList.id = res.id
                this.zhuanhuList.list.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },


        // 工人情况
        getHomeSsu(){
            uni.showLoading({ title:'工人情况获取中' })
            this.$request(this,this.$apis.HomeSsu, this.parameter).then(res=>{
                // console.log('工人情况',res)
                this.datas1.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },

        // 今日考勤
        getHomeToday(){
            uni.showLoading({ title:'今日考勤获取中' })
            this.$request(this,this.$apis.HomeToday, this.parameter).then(res=>{
                // console.log('今日考勤',res)
                this.datas2.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },

        // 班组情况
        getHomeGroupOverview(){
            uni.showLoading({ title:'班组情况获取中' })
            this.$request(this,this.$apis.HomeGroupOverview, this.parameter).then(res=>{
                // console.log('班组情况',res)
                if( res.length != 0 ){
                    res.map((v,i)=>{
                        this.teams.groups += Number(v.groups)
                        this.teams.members += Number(v.member)
                    })
                    this.teams.list = res
                }
            }).then()
        },

        // 工人分布
        getHomeAtdmonth(){
            this.$request(this,this.$apis.HomeAtdmonth, this.parameter).then(res=>{
                // console.log('工人分布',res)
                this.workerFenbu.categories = []
                this.workerFenbu.series = [
                    { name: "考勤人数", data: [] },
                    { name: "总人数", data: [] }
                ] 
                res.map((v,i)=>{
                    this.workerFenbu.categories.push(v.date)
                    this.workerFenbu.series[0].data.push(v.atdStaffs) // 实名制进场人数
                    this.workerFenbu.series[1].data.push(v.staffs) // 考勤总人数
                })
            }).then()
        },

        // 查看专户详情信息
        accountDetail(){
            // 先调用工资专户信息拿到业务编号(人设端文档)
            uni.showLoading({ title:'专户详情加载中' })
            this.$request(this,this.$apis.AccAccsSalary, {gcbh:this.parameter.gcbh}).then(res=>{
                // console.log('工资专户信息',res)
                uni.navigateTo({ url: '/pages/fohf-bag/detail?id='+res.id })
            }).then()
        }
    }
}

</script>

<style scoped lang="scss">
    .content{
        // 自定义指示器
        /deep/ .u-swiper__indicator{
            bottom: 80rpx;
            .indicator {
                @include flex(row);
                justify-content: center;
                &__dot {
                    height: 16rpx;
                    width: 16rpx;
                    border-radius: 100px;
                    background-color: rgba(255, 255, 255, 0.35);
                    margin: 0 5px 34rpx;
                    transition: background-color 0.3s;
                    &--active {
                        background-color: #ffffff;
                    }
                }
            }
        }
        .box{
            margin-top: -60rpx;
            border-radius: 60rpx 60rpx 0 0;
            position: relative;
            z-index: 101;
            background: $uni-text-color-inverse;
        }

        // 横向滚动
        .scroll-list{
            .tem{
                margin: 0 20rpx;
                &:nth-child(1){
                    margin-left: 16rpx;
                }
                &:last-child{
                    padding-right: 16rpx;
                }
                .item:nth-child(1){
                    margin-bottom: 30rpx;
                }
            }
        }

        // 班组
        .table{
            border: 1rpx solid #eee;
            border-radius: 8rpx;
            .teamTr{
                height: 80rpx;
                &:nth-of-type(even){
                    background: #F6F7F8;
                }
                .teamTh{
                    font-size: 28rpx;
                    font-weight: bold;
                }
                .teamTd{
                    font-size: 28rpx;
                    color: $uni-text-color-dec;
                    &:last-child{
                        color: $uni-higt-error !important;
                    }
                }
            }
        }

        // tabbar阴影
        .tabbar-shadow{
            width: 100%;
            position: fixed;
            left: 0;
            z-index: 997; 
            box-shadow: 0px -5px 10px -10px rgba(0, 0, 0, 0.5);
            height: 44px;
            /* #ifdef APP-PLUS */
            bottom: -44px;
            /* #endif */
            /* #ifdef H5 */
            bottom: 11px;
            /* #endif */
        }
    }
</style>

// <script module="vconsole" lang="renderjs">
//     import Vconsole from 'vconsole';
//     let vConsole = new Vconsole();
//     export default vConsole
// </script>
